<template>
  <div id="index_container">
    <div id="search_wrap">
      <search></search>
    </div>
    <div id="map_wrap">
      <map-container></map-container>
    </div>
    <div id="heatMap_warp">
      <heat-map-search></heat-map-search>
    </div>
  </div>
</template>

<script>
import HeatMapSearch from '../components/heatMapSearch/heatMapSearch.vue'
import mapContainer from '../components/mapContainer/mapContainer.vue'
import Search from '../components/Search/Search.vue'
export default {
  components: { mapContainer, Search, HeatMapSearch }
}
</script>

<style lang="less" scoped>
#index_container {
  background-color: aliceblue;
  height: 100%;
  width: 100%;
  position: relative;
  #map_wrap {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 60%;
  }
  #search_wrap {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
    width: 500px;
  }
  #heatMap_warp {
    position: absolute;
    top: 30%;
    left: 60%;
    transform: translate(-50%, -450%);
  }
}
</style>
